<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>鼠标左右晃动，文字和图片跟着晃动的视差效果 - 我爱模板网www.5imoban.net</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    div {
      background: #2454a6;
      width: 500px;
      height: 350px;
      position: relative;
      margin: 0 auto;
    }

    img,
    span,
    p {
      position: absolute;
      color: #fff;
      font-family: "微软雅黑";
      font-size: 14px;
    }

    img {
      left: 60px;
      top: 0px;
    }

    span {
      left: 60px;
      top: 180px;
      font-size: 14px;
      font-weight: bold;
    }

    p {
      left: 50px;
      top: 230px;
      width: 350px;
      text-indent: 2em
    }
  </style>
</head>

<body>
  <div id="sky">
    <img src="http://www.5imoban.net/view/demoimg/cloud.png" />
    <span>鼠标左右晃动，文字和图片跟着晃动的视差效果</span>
    <p>将鼠标移动到“天空”上，左右上下晃动，可以看到云层、标题和段落文字都向上下左右偏移！</p>
  </div>
  <script src="../Library/jquery/jquery-3.6.0.min.js"></script>
  <script>
    $('#sky').on('mousemove', function (e) {
      //公式
      var offsetX = e.clientX / window.innerWidth - 0.5,
        offsetY = e.clientY / window.innerHeight - 0.5;
      var _left = -40 * offsetX; //如果想动的幅度更大，可以调整 -40 的值
      var _top = -40 * offsetY; //如果想动的幅度更大，可以调整 -40 的值
      //应用公式
      $('#sky img').css('left', 60 + _left * 0.3).css('top', _top * 0.3); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小
      $('#sky span').css('left', 60 + _left * 3).css('top', 180 + _top * 3); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小
      $('#sky p').css('left', 50 + _left * 1.5).css('top', 230 + _top * 1.5); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小
    });
  </script>
</body>

</html>